<template>
  <div>
    <p>数量：{{ sum }}</p>
    <p>姓名：{{ person.name }}</p>
    <p>年龄：{{ person.age }}</p>
    <p>汽车：{{ car }}</p>
    <button @click="changeSum">修改数量</button>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个</button>
    <hr />
    <button @click="changeBrand">修改品牌</button>
    <button @click="changeColor">修改颜色</button>
    <button @click="changeEngine">修改发动机</button>
    <button @click="changeCar">修改整个汽车</button>
  </div>
</template>

<script setup lang="ts" name="">
import { reactive, ref, shallowRef, shallowReactive } from "vue";
//shallowRef 浅层代理  不会监听对象内部属性  只监听对象本身
let sum = shallowRef(0);
let person = shallowRef({
  name: "张三",
  age: 10,
});
let car = shallowReactive({
  brand: "奔驰",
  option: {
    color: "red",
    engine: "V8",
  },
});
function changeSum() {
  sum.value++;
}
function changeName() {
  person.value.name += "~";
}
function changeAge() {
  person.value.age += 1;
}
function changePerson() {
  person.value = { name: "小张", age: 20 };
}
/**-------------------------- */

function changeBrand() {
  car.brand = "Audi";
}
function changeColor() {
  car.option.color = "蓝色";
}
function changeEngine() {
  car.option.engine = "v6";
}
function changeCar() {
  Object.assign(car, {
    brand: "BMW",
    option: { color: "黑色", engine: "v11" },
  }); //修改reactive对象只能用这样子 assign分配的意思
}
</script>

<style scoped></style>
